<template>
	<div class="nickname">
		<div class="head">
			<router-link tag="div" to="/personal" class="rou"><</router-link>
			<div class="zd">昵称</div>
			<div class="sx" @click="demo">保存</div>
		</div>
		<div class="con">
			<div class="in">
				<input type="" v-model="nickname" name="" id="" value="jj" />
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:"nickname",
		data(){
			return{
				nickname:""
			}
		},
		methods:{
			demo(){
				alert("登录成功");
				localStorage.setItem("username", this.nickname);
				window.location.href = "http://localhost:8080/#/personal";
			}
		}
	}
</script>

<style lang="less">
	.nickname{
		.head{
			background: #3AAE95;
			overflow: hidden;
			height: 50/50rem;
			line-height: 50/50rem;
			div{
				float: left;
				font-size: 20/50rem;
				color:#fff;
			}
			.rou{
				margin-left: 10/50rem;
			}
			.zd{
				margin-left: 150/50rem;
			}
			.sx{
				margin-left: 100/50rem;
			}
		}
		.con{
			margin-top: 10/50rem;
			background: #fff;
			.in{
				input{
					widows: 100%;
					/*height: 18/50rem;*/
					line-height: 30/50rem;
					/*padding-left: 30/50rem;*/
					font-size: 20/50rem;
				}
			}
		}
	}
</style>